<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <link rel="stylesheet" type="text/css" href="resource/font/iconfont.css">
    <link rel="stylesheet" href="resource/css/vj-weui.css"/>
    <link rel="stylesheet" href="resource/css/style.css"/>
</head>
<body class="weui-bg-style_1">
<div class="bg-color">
    <div class="single-row">
        <div class="single-title">
            <div class="single-title_content">
                圣米歇尔山参观一日游(包含午餐)可换行最多两行
            </div>
        </div>
        <div class="single-info">
            <div class="single-img">
                <img src="http://m.vtrcdn.com/MBL_4.77.0.4-20180111/assets/images/top-dest/top-10-357-m.jpg" alt="">
            </div>
            <div class="single-detail">
                <div class="single-detail_info">
                    <div class="single-detail_info_row">
                        <span class="single-detail_info_row_title">出行日期：</span>2018/03/20
                    </div>
                    <div class="single-detail_info_row">
                        <span class="single-detail_info_row_title">具体时间：</span>上午
                    </div>
                    <div class="single-detail_info_row">
                        <span class="single-detail_info_row_title">出游人数：</span>2成人1儿童1婴儿
                    </div>
                    <div class="single-detail_info_row">
                        <span class="single-detail_info_row_title">订单号：</span>03459345983453045
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<div class="body_style_1">
    <div class="weui-panel weui-panel_access">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>成人旅客</p>
            </div>
            <div class="weui-cell__ft">

            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="" class="weui-label">成人1</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" value="" placeholder="请输入中文姓名">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="" class="weui-label">成人2</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" value="" placeholder="请输入中文姓名">
            </div>
        </div>
    </div>
</div>
<div class="body_style_1">
    <div class="weui-panel weui-panel_access">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>儿童旅客</p>
            </div>
            <div class="weui-cell__ft">

            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="" class="weui-label">儿童1</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" value="" placeholder="请输入中文姓名">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="" class="weui-label">儿童2</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" value="" placeholder="请输入中文姓名">
            </div>
        </div>
    </div>
</div>
<div class="body_style_1">
    <div class="weui-panel weui-panel_access">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>联系人信息</p>
            </div>
            <div class="weui-cell__ft">

            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="" class="weui-label">中文姓名</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" value="" placeholder="与证件姓名一致">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="" class="weui-label">手机号码</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" value="" placeholder="请输入手机号码">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="" class="weui-label">邮箱</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="email" value="" placeholder="请输入邮箱">
            </div>
        </div>
    </div>
</div>
<div class="weui-footer">
    <p class="weui-footer__links">
        <a href="javascript:void(0);" class="weui-footer__link open-popup" data-target="#half">查看详细</a>
    </p>
</div>

<a id="half" class='weui-popup__container popup-bottom close-popup'>
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="toolbar">
            <div class="toolbar-inner" style="background-color: #11a4c0;">
                <div class="pay-title">
                    <p>费用详细</p>
                </div>
                <div class="pay-price"><span class="pay-price_left">共</span><span class="pay-price_right">￥500,00</span>
                </div>
            </div>
        </div>
        <div class="modal-content">
            <div class="weui-grids" style="padding: 15px .5rem 30px .5rem">
                <div class="pay-price_content">
                    <div class="pay-price_content_title">
                        成人
                    </div>
                    <div class="pay-price_content_desc">
                        1 x 290
                    </div>
                </div>
                <div class="clear"></div>
                <div class="pay-price_content">
                    <div class="pay-price_content_title">
                        儿童
                    </div>
                    <div class="pay-price_content_desc">
                        1 x 210
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</a>

<div class="nav-seize-seat"></div>
<div class="nav-price">
    <div class="nav-price_info">
        <span class="nav-price_info_title">总额：</span><span class="nav-price_info_price">￥290,00</span>
    </div>
    <div class="nav-price_button">
        <a href="" class="weui-btn weui-btn_mini weui-btn_prohibit" style="margin-top: 0">下一步</a>
    </div>
    <div class="clear"></div>
</div>
</body>
</html>

<script src="resource/js/zepto.js"></script>
<script src="resource/js/vj-weui.js"></script>
<script src="resource/js/fastclick.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
    $(document).on("open", ".weui-popup-modal", function () {
        console.log("open popup");
    }).on("close", ".weui-popup-modal", function () {
        console.log("close popup");
    });
</script>